import 'package:flutter/material.dart';
import '../../tools/keep_alive_warpper.dart';
import '../article_detail.dart';

class Index extends StatefulWidget {
  const Index({Key? key}) : super(key: key);

  @override
  _IndexState createState() => _IndexState();
}

class _IndexState extends State<Index> with SingleTickerProviderStateMixin {
  //---------顶部AppBar中添加可点击切换的顶部tab---------
  late TabController _tabController; //顶部bar的控制器

  //生命周期函数：initState。此方法在 Widget 的 State 对象被创建时调用，且只被调用一次
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this); //第一个参数是顶部tabBar长度
    _tabController.addListener(() {
      //滑动body区域，切换顶部tab时，会触发两次。加入if判断可以防止这种情况
      if (_tabController.animation!.value == _tabController.index) {
        print(_tabController.index);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //默认的AppBar会有一个顶部导航栏，可以使用PreferredSizes设置高度可以解决
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: AppBar(
            backgroundColor: Colors.white,
            elevation: 0.2, //顶部分隔阴影高度
            //SizedBox、ConstrainedBox可以将TabBar组件高度约束为50
            title: SizedBox(
                height: 50,
                child: TabBar(
                    controller: _tabController, //顶部bar的控制器
                    tabs: const [
                      Tab(child: Text('推荐')),
                      Tab(child: Text('前端开发')),
                      Tab(child: Text('后端开发')),
                    ],
                    unselectedLabelColor: Colors.black,
                    indicator: const BoxDecoration(
                        //选中指示器样式
                        color: Colors.blue),
                    indicatorPadding: const EdgeInsets.fromLTRB(10, 5, 10, 5)
                    // indicatorSize:TabBarIndicatorSize.label//选中指示器宽度跟
                    ))),
      ),
      body: TabBarView(
          controller: _tabController, //顶部bar的控制器
          children: [
            KeepAliveWarpper(
              isKeepAlive: true,
              child: ListView(
                children: [
                  ListTile(
                      title: const Text('普通路由跳转（带参数）'),
                      onTap: () {
                        //Navigator组件push跳转，pop返回
                        Navigator.of(context).push(
                            MaterialPageRoute(builder: (BuildContext context) {
                          return const ArticleDetail(
                              title: '普通路由跳转++'); //传入参数title
                        }));
                      }),
                  // ListTile(
                  //   title: const Text('命名路由跳转（不带参数）'),
                  //   onTap: () {
                  //     Navigator.pushNamed(context, '/news_detail');
                  //   },
                  // ),
                  ListTile(
                    title: const Text('命名路由跳转（带参数）'),
                    onTap: () {
                      Navigator.pushNamed(context, '/news_detail',
                          arguments: {'title': '命名路由跳转（带参数）++'});
                    },
                  ),
                  ListTile(
                    title:const Text('重定向'),//将当前页面栈顶部的页面替换为跳转的/pic_detail页。你会返现跳转后没有返回按钮了
                    onTap: (){
                      Navigator.of(context).pushReplacementNamed('/pic_detail');
                    }
                  ),
                  ListTile(
                    title:const Text('弹窗、toast示例'),
                    onTap: (){
                      Navigator.pushNamed(context,'/dialog_detail');
                    }
                  ),
                  ListTile(
                    title:const Text('PageView类似抖音视频上、下划切换'),
                    onTap: (){
                      Navigator.pushNamed(context, '/page_view_detail');
                    },
                    ),
                  ListTile(
                      title:const Text('测试内容撑起布局'),
                    onTap: (){
                        Navigator.pushNamed(context, '/page_fit_content');
                    },
                  ),
                  ListTile(title: Text('推荐列表')),
                  ListTile(title: Text('推荐列表')),
                  ListTile(title: Text('推荐列表')),
                  ListTile(title: Text('推荐列表')),
                  ListTile(title: Text('推荐列表')),
                  ListTile(title: Text('11推荐列表')),
                  ListTile(title: Text('22推荐列表')),
                  ListTile(title: Text('33推荐列表')),
                  ListTile(title: Text('44推荐列表')),
                ],
              ),
            ),
            ListView(
              children: const [
                ListTile(title: Text('前端列表')),
              ],
            ),
            ListView(
              children: const [
                ListTile(title: Text('后端列表')),
              ],
            )
          ]),
    );
  }
}
